<template>
    <form @submit.prevent="submit">
      <div>
        <label>用户名:</label>
        <input v-model="user.username" type="text" required />
      </div>
      <div>
        <label>中文姓名:</label>
        <input v-model="user.chinese_name" type="text" required />
      </div>
      <div>
        <label>密码:</label>
        <input v-model="user.password" type="password" required />
      </div>
      <div>
        <label>单位:</label>
        <input v-model="user.department" type="text" required />
      </div>
      <div>
        <label>电话:</label>
        <input v-model="user.phone" type="text" required />
      </div>      
      <button type="submit">创建</button>
    </form>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  
  const user = ref({
    username: '',
    chinese_name: '',
    password: '',
    department: '',
    phone: ''
  })
  
  const emit = defineEmits(['submit'])
  
  const submit = () => {
    emit('submit', user.value)
  }
  </script>